import { IUser } from "@/store/user";
import { Modal, Checkbox } from "antd";
import { Avatar } from "@/components/Avatar";
import { PropsWithChildren, useMemo } from "react";

interface ISelectModalProps extends PropsWithChildren {
  title: string;
  open: boolean;
  onOk?: () => void;
  onCancel?: () => void;
  selectValues: number[];
  selectChange?: (value: number[]) => void;
  users: Array<IUser & { disabled?: boolean }> | undefined;
}

export function SelectUserModal(props: ISelectModalProps) {
  const {
    title,
    open,
    onOk,
    onCancel,
    selectValues,
    selectChange,
    children,
    users,
  } = props;

  const selectdUser = useMemo(() => {
    return users?.filter((item) => selectValues.includes(item.id));
  }, [selectValues, users]);

  return (
    <Modal
      title={title}
      destroyOnClose={true}
      open={open}
      onOk={onOk}
      onCancel={onCancel}
      width={600}
      height={400}
    >
      <div className="flex py-4 h-[320px]">
        <div className="scrollbar-custom overflow-y-hidden hover:overflow-y-auto w-[240px] h-full">
          <Checkbox.Group
            value={selectValues}
            onChange={selectChange}
            className="flex flex-col justify-center gap-2"
          >
            {users?.map((item) => {
              return (
                <Checkbox
                  value={item.id}
                  key={item.id}
                  disabled={item.disabled}
                >
                  <div className="flex flex-1 items-center hover:bg-slate-100 px-2 py-1 rounded-lg w-[200px] ">
                    <Avatar
                      key={item.id}
                      src={item.avatar}
                      name={item.nickName}
                    />
                  </div>
                </Checkbox>
              );
            })}
          </Checkbox.Group>
        </div>
        <div className="flex-1">
          <div className="mb-2">{children}</div>
          <div className="flex flex-wrap gap-2]">
            {selectdUser?.map((user) => {
              return (
                <div key={user.id} className="w-[50px]">
                  <Avatar key={user.id} src={user.avatar} />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </Modal>
  );
}
